<template>
  <div class="wrapper">
    <div class="wrapper_header">
      <img class="wrapper_img1" src="../../assets/image/login.png" />
      <p>欢迎来到爱课!</p>
    </div>

    <div class="wrapper_input1">
      <input
        class="wrapper_input_content1"
        placeholder="请输入手机号"
        v-model="phoneNum"
      />
    </div>
    <p class="prompt" v-if="phoneShow">请输入正确的手机号</p>
    <div class="wrapper_input2">
      <input
        class="wrapper_input_content2"
        placeholder="请输入验证码"
        v-model="testCode"
      />
      <button @click="handleClick">获取验证码</button>
    </div>
    <p class="prompt" v-if="testShow">请输入6位验证码</p>
    <div class="wrapper_login-button" @click="next">登陆/注册</div>
    <div class="wrapper_footer_img">
      <span>登陆即代表同意爱课</span>
      <span class="serve">《服务使用协议》</span>
      <span class="secret"> 《隐私政策》</span>
    </div>
  </div>
</template>

<script>
// import { useRouter } from "vue-router";
export default {
  name: "Login",
  // setup() {
  //   const router = useRouter();
  //   const handleLogin = () => {
  //     localStorage.isLogin = true;
  //     router.push({ name: "Home" });
  //   };
  //   return { handleLogin };
  // },
  data() {
    return {
      phoneNum: "",
      phoneShow: false,
      testCode: "",
      testShow: false,
    };
  },
  watch: {
    phoneNum(val) {
      this.phoneShow = true;
      if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.exec(val)) {
        this.phoneShow = false;
      }
    },
    testCode(val) {
      this.testShow = true;
      if (/^.{6}$/.exec(val)) {
        this.testShow = false;
      }
    },
  },
  methods: {
    next() {
      if (this.phoneNum && this.testCode && !this.phoneShow && !this.testShow) {
        localStorage.setItem("isLogin", true);
        this.$router.push("/Register");
      }
    },
    handleClick() {
      alert("获取验证码 12345");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.prompt {
  font-size: @s-font;
  line-height: 20px;
  color: rgb(255, 187, 187);
  position: absolute;
  left: 55px;
  margin-top: -8px;
}
.wrapper {
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  background: white;
  .wrapper_header {
    display: flex;
    justify-content: space-around;
    margin: 100px 177px 50px 37px;
    p {
      font-size: @l-font;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper_img1 {
      width: 40px;
      height: 40px;
    }
  }
  .wrapper_input1 {
    padding: 0 16px;
    box-sizing: border-box;
    height: 50px;
    width: 300px;
    margin: 39px 34px 15px 34px;
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    border-radius: 25px;

    .wrapper_input_content1 {
      width: 100%;
      line-height: 50px;
      outline: none;
      border: none;
      background: none;
      font-size: @s-font;
      ::placeholder {
        color: #777;
      }
    }
  }
  .wrapper_input2 {
    padding: 0 16px;
    box-sizing: border-box;
    height: 50px;
    width: 300px;
    margin: 39px 34px 15px 34px;
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    border-radius: 25px;
    display: flex;
    button {
      width: 80px;
      height: 34px;
      font-size: @xxxs-font;
      background: #0091ff;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      margin-top: 8px;
      color: white;
    }
    .wrapper_input_content2 {
      width: 100%;
      line-height: 50px;
      outline: none;
      border: none;
      background: none;
      font-size: @s-font;
      ::placeholder {
        color: #777;
      }
    }
  }
  .wrapper_login-button {
    margin: 40px 34px 76px 34px;
    line-height: 50px;
    background-color: #0091ff;
    border-radius: 49px;
    border-radius: 49px;
    color: #fff;
    text-align: center;
    font-size: @m-font;
  }
  .wrapper_footer_img {
    width: 100%;
    height: 170px;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(../../assets/image/beijing.png) no-repeat;
    background-size: 100%;
    text-align: center;
    padding-top: 140px;
  }
  span {
    top: 140px;
    left: 31px;
    color: #999;
    text-align: center;
    font-size: @s-font;
  }
  .serve {
    color: #333;
    top: 140px;
    left: 40px;
  }
  .secret {
    color: #333;
  }
}
</style>
